<script setup>
import {
  VideoPlay
} from '@element-plus/icons-vue'
import { ref, computed, onMounted } from 'vue';
import WordDetailed from "@/components/WordDetailed.vue"
import { GetWordTaskAPI, GetstudyDataToDayAPI, PutTaskResultAPI } from '@/api/studyData.js'

const tishi = ref(false) //控制提示显示隐藏
const worddetailed = ref(false) //控制单词详细信息显示隐藏

// 调用获取今天数据和单词书的接口
const DailyAmount = ref(0) // 	设定的每日单词学习数量。
const TodayAmount = ref(0) // 今天已经学习的数量。
const LearnDuration = ref(0)// 今天学习时长。

const Word = ref('')// 单词
const Phonetic = ref('')// 音标
const Phonetic_audio = ref('')// 音标音频
const Example_audio = ref('') // 例句音频
const Example_en = ref('') // 例句英文
const audio = ref(); // 获取发音元素
const audio2 = ref();// 获取例句元素
const Word_id = ref('') // 单词id
const Task_id = ref('') // 任务id


const GetstudyDataSeven = async () => {
  // 同时发起两个接口，需要两个接口的数据      冒号是重命名的意思
  const [{ learn_duration, daily_amount, learned_amount: today_amount }, { task_id, word_id, word, example_en, example_audio, phonetic, phonetic_audio }] = await Promise.all([GetstudyDataToDayAPI(), GetWordTaskAPI()])
  DailyAmount.value = daily_amount
  TodayAmount.value = today_amount
  LearnDuration.value = Math.floor(learn_duration / 60) // 将秒数转换为分钟数
  Word.value = word
  Phonetic.value = phonetic
  Phonetic_audio.value = phonetic_audio
  Example_audio.value = example_audio
  Example_en.value = example_en
  Word_id.value = word_id
  Task_id.value = task_id
}
GetstudyDataSeven()




// 传入参数进行动态赋值，这样就不用多写几个函数了
const plays = (item, src) => {
  if (item) {
    item.src = src
    item.play();
  }
};

// 已完成百分比
const finish = computed(() => {
  return TodayAmount.value / DailyAmount.value * 100
})

//点击提示一下 
const tishiyixia = (item, src) => {
  //触发按钮转换和语音播报
  tishi.value = true
  plays(item, src)
}

// 点击没想起来
const meixiangqilai = async () => {
  worddetailed.value = true
  await PutTaskResultAPI(Task_id.value, 'forget') // 给每个词添加一个学习结果，点击没想起来就是忘记
}

// 点击想起来了
const xiangqilaile = async () => {
  worddetailed.value = true
  await PutTaskResultAPI(Task_id.value, 'remember')// 给每个词添加一个学习结果，点击想起来就是记得
}

// 点击学习下一个
const xuexixiayige = async () => {
  await GetstudyDataSeven() // 点击下一个时要重新获取新的数据渲染
  tishi.value = false
  worddetailed.value = false
  plays(audio.value, Phonetic_audio.value) // 点击下一个时，语音播报
}

// 点击我认识
const worenshi = async () => {
  worddetailed.value = true
  await PutTaskResultAPI(Task_id.value, 'simple')// 给每个词添加一个学习结果，点击我认识就是简单认识
}


onMounted(() => setTimeout(() => {
  plays(audio.value, Phonetic_audio.value)
}, 300))

</script>


<template>
  <div class="parent" v-show="!worddetailed">
    <div class="box">
      <!-- 学习进度 -->
      <div class="data">
        <div class="item">
          <div style="font-size: 13px; ">应学</div>
          <div style="font-size: 16px; font-weight: bold;">{{ DailyAmount }}</div>
        </div>
        <div class="item">
          <div style="font-size: 13px;">已学</div>
          <div style="font-size: 16px; font-weight: bold;">{{ TodayAmount }}</div>
        </div>
        <div class="item">
          <div style="font-size: 13px;">时长</div>
          <div style="font-size: 16px; font-weight: bold;">{{ LearnDuration }}<span>min</span></div>
        </div>
      </div>
      <el-progress :percentage="finish" color="#5BBE9E" :show-text="false" />

      <!-- 单词发音 -->
      <div class="container">
        <div class="word">{{ Word }}</div>
        <audio ref="audio">
          <source src="" type="audio/ogg" />
        </audio>
        <div class="listen">
          <el-icon color="#5bbe9e" @click="plays(audio, Phonetic_audio)">
            <VideoPlay />
          </el-icon>
          <div class="yb">/ <span>{{ Phonetic }}</span> /</div>
        </div>
      </div>

      <!-- 提示 -->
      <audio ref="audio2">
        <source src="" type="audio/ogg" />
      </audio>
      <div class="tishi" v-show="tishi">
        <p style="margin-bottom: 10px;">根据提示，判断释义</p>
        <div class="liju">
          <span>例句</span>
          <span>{{ Example_en }}</span>
          <el-icon color="#5bbe9e" @click="plays(audio2, Example_audio)">
            <VideoPlay />
          </el-icon>
        </div>
      </div>

      <!-- 按钮 -->
      <div class="button">
        <el-button size="large" type="success" class="know" v-show="!tishi" @click="worenshi">我认识</el-button>
        <el-button size="large" type="success" class="ps" v-show="!tishi"
          @click="tishiyixia(audio2, Example_audio)">提示一下</el-button>

        <el-button size="large" type="success" class="know" v-show="tishi" @click="xiangqilaile">想起来了</el-button>
        <el-button size="large" type="success" class="ps" v-show="tishi" @click="meixiangqilai">没想起来</el-button>
      </div>
    </div>
  </div>
  <!-- ps：这里不能用show，否则会报错 -->
  <WordDetailed v-if="worddetailed" :Word_id="Word_id">
    <div class="nexta">
      <el-button size="large" type="success" class="next" round @click="xuexixiayige">学习下一个</el-button>
    </div>
  </WordDetailed>
</template>

<style lang="scss" scoped>
.parent {
  width: 100%;
  height: 90vh;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
}

.box {
  // background: pink;
  grid-area: 1 / 2 / 3 / 4;

  .data {
    display: flex;
    justify-content: space-around;
    margin: 20px 0;

    .item {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
  }

  .container {
    display: flex;
    align-items: center;
    flex-direction: column;

    .word {
      margin: 60px 0 20px;
      font-size: 36px;
      font-weight: bold;
    }

    .listen {
      display: flex;
      align-items: center;


      .yb {
        padding-left: 20px;
      }
    }
  }

  .button {
    display: flex;
    justify-content: space-between;
    min-width: 100%;
    height: 20vh;
  }

  .know {
    flex: 1;
    border-radius: 20px;
    background-color: #5BBE9E;
    border: #5BBE9E;
    align-self: flex-end;
  }

  .ps {
    flex: 1;
    border-radius: 20px;
    background-color: #F0925C;
    border: #F0925C;

    align-self: flex-end;
  }

  .tishi {
    margin-top: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;

    .liju {
      width: 100%;
      height: 60px;
      background: #DDDDDD;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: space-around;
    }
  }
}

.nexta {
  display: flex;
  justify-content: space-between;
  min-width: 100%;
  height: 20vh;

  .next {
    flex: 0.7;
    border-radius: 20px;
    background-color: #5BBE9E;
    border: #5BBE9E;
    align-self: flex-end;

  }
}
</style>
